<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <title>编辑菜单</title>
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="/css/font.css">
    <link rel="stylesheet" href="/css/xadmin.css">
</head>
<body style="padding: 10px;background: white;min-height: 90%">
<div id="divvuehtml" style="width: 90%;height: 100%;margin: auto;" v-if="menuItems">
    <form class="layui-form" id="add">
        <input type="hidden" name="menuid" :value="menuItems.menuid">
        <table class="layui-table" lay-size="sm">
            <thead>
                <tr>
                    <th colspan="4" style="text-align: center;">编辑菜单</th>
                </tr>
            </thead>
            <tbody style="text-align: center;">
            <tr>
                <td>上级菜单</td>
                <td>
                    <input type="text"  :value="menuItems.parentid" readonly="readonly" placeholder="请输入上级菜单"  autocomplete="off" class="layui-input" lay-verify="required">
                </td>
                <td>菜单类型</td>
                <td>
                    <select name="type" lay-verify="required" :value="menuItems.type">
                        <option value=""></option>
                        <option value="0">目录</option>
                        <option value="1">菜单</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>菜单名称</td>
                <td>
                    <input type="text" name="name" :value="menuItems.name" placeholder="请输入菜单名称"  autocomplete="off" class="layui-input">
                </td>
                <td>链接URL</td>
                <td>
                    <input type="text" name="url" :value="menuItems.url" placeholder="请输入链接URL"  autocomplete="off" class="layui-input">
                </td>
            </tr>
            <tr>
                <td>跳转方式</td>
                <td>
                    <select name="target" lay-verify="required" :value="menuItems.target">
                        <option value=""></option>
                        <option value="0">本页面</option>
                        <option value="1">新窗口</option>
                    </select>
                </td>
                <td>排序</td>
                <td>
                    <input type="number" name="orderNum"  :value="menuItems.orderNum" placeholder="请输入排序"  autocomplete="off" class="layui-input">
                </td>
            </tr>
            <tr >
                <td colspan="4">
                    <button class="layui-btn layui-btn-normal" lay-submit lay-filter="formDemo">修改</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </td>
            </tr>
            </tbody>
        </table>
    </form>
</div>
</body>
<script src="/lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/xadmin.js"></script>
<script type="text/javascript" src="/js/vue.js"></script>
<script th:inline="none">

    var ve = new Vue({
        el: '#divvuehtml',//绑定vue渲染范围
        data: {
            menuItems:{}//初始化菜单资源对象
        },created: function () {//vue在打开html也没初始化创建函数
            this.inin();//初始化菜单数据
        },mounted: function () {//初始化html完成后在进行操作
            layui.use(['form','layer'], function(){
                var form = layui.form;
                var layer = layui.layer;
                //监听提交
                form.on('submit(formDemo)', function(data){
                    var index;
                    $.ajax({
                        url : "/menu/update",
                        type : "POST",
                        data : data.field,
                        dataType : "json",
                        beforeSend : function(XMLHttpRequest) {
                            index = layer.msg('正在提交数据中，请稍候', {
                                icon : 16,
                                time : false,
                                shade : 0.8
                            });
                        },success : function(data) {
                            if(data.success){
                                // 刷新父页面
                                layer.alert(data.msg, {
                                    icon : 6
                                }, function() {
                                    xadmin.close();
                                    // 刷新父页面
                                    parent.location.reload();
                                });
                            }else{
                                xadmin.alert(data.msg,2)
                            }
                        },complete : function(XMLHttpRequest, textStatus) {
                            layer.close(index);
                        },error : function(data) {
                            layer.alert('网络异常或者数据错误', {
                                icon : 2
                            });
                        }
                    });
                    return false;
                });
            });
        },methods: {//调用函数
            inin :function (){
                $.get("/menu/getMenuById",{"menuid":getUrlParam("menuid")},function(data){
                    if(data.success){
                        ve.menuItems = data.data;
                    }else{
                        xadmin.alert("初始化数据错误");
                    }
                },"json")
            }
        },updated: function () {
            layui.use(['form'], function(){
                var form = layui.form;
                form.render();
            })
        }
    })

    /**
     * 取得url参数
     */
    function getUrlParam(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); // 构造一个含有目标参数的正则表达式对象
        var r = window.location.search.substr(1).match(reg);  // 匹配目标参数
        if (r != null) return unescape(r[2]); return null; // 返回参数值
    }
</script>
</html>
